<template>
  <div class="main_time">
    <div class="go_time" @click="goTime">
      <div class="go_time_l" :class="{ order_goTime: order_goTime }">
        出发时间
      </div>
      <div class="go_time_r" v-if="go_time_show_icon == 0">
        <img :src="nulls" alt="" />
      </div>
      <div class="go_time_r" v-else-if="go_time_show_icon == 1">
        <img :src="up" alt="" />
      </div>
      <div class="go_time_r" v-else-if="go_time_show_icon == 2">
        <img :src="down" alt="" />
      </div>
    </div>
    <div class="take_time" @click="takeTime">
      <div class="take_time_l" :class="{ order_makeTime: order_makeTime }">
        预约时间
      </div>
      <div class="take_time_r" v-if="take_time_show_icon == 0">
        <img :src="nulls" alt="" />
      </div>
      <div class="take_time_r" v-else-if="take_time_show_icon == 1">
        <img :src="up" alt="" />
      </div>
      <div class="take_time_r" v-else-if="take_time_show_icon == 2">
        <img :src="down" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import nulls from "/@/assets/img/carOrder/car_null.png";
import up from "/@/assets/img/carOrder/car_up.png";
import down from "/@/assets/img/carOrder/car_down.png";

export default {
  name: "",
  data() {
    return {
      sort_content: null, //1出发时间 2 约车时间
      sort_type: null, // 1升序 2 降序
      //
      order_goTime: false, //css控制字体颜色
      order_makeTime: false, //css控制字体颜色

      go_time_sort_type: false, //判断当前是升序 true还是降序 false
      take_time_sort_type: false, //判断当前是升序 true还是降序 false

      go_time_show_icon: 0,
      take_time_show_icon: 0,
      // 图片地址
      nulls: nulls,
      up: up,
      down: down
    };
  },
  created() {},
  watch: {
    // sort_type: {
    //   handler(newName, oldName) {
    //     console.log(newName, oldName, 3555555555555);
    //     if (!newName) {
    //       // 灰色
    //     } else if (newName == 1) {
    //       // 升序
    //     } else if (newName == 2) {
    //       // 降序
    //     }
    //   },
    //   // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    //   immediate: true
    // }
  },
  methods: {
    // 出发时间 区分升序和降序
    goTime() {
      console.log("出发时间");
      this.sort_content = 1; //1出发时间 2 约车时间
      this.order_goTime = true;
      this.order_makeTime = false;
      this.go_time_sort_type = !this.go_time_sort_type;
      this.take_time_show_icon = 0;
      if (this.go_time_sort_type) {
        this.sort_type = 1;
        this.go_time_show_icon = 1;
      } else {
        this.sort_type = 2;
        this.go_time_show_icon = 2;
      }

      this.$emit("FooterTabTime", {
        sort_content: this.sort_content,
        sort_type: this.sort_type
      });
    },

    // 预约时间  区分升序和降序
    takeTime() {
      console.log("预约时间 ");
      this.sort_content = 2; //1出发时间 2 约车时间
      this.order_goTime = false;
      this.order_makeTime = true;
      this.take_time_sort_type = !this.take_time_sort_type;
      this.go_time_show_icon = 0;
      if (this.take_time_sort_type) {
        this.sort_type = 1;
        this.take_time_show_icon = 1;
      } else {
        this.sort_type = 2;
        this.take_time_show_icon = 2;
      }
      this.$emit("FooterTabTime", {
        sort_content: this.sort_content,
        sort_type: this.sort_type
      });
    }
  }
};
</script>
<style lang="less" scoped>
.main_time {
  display: flex;
  align-items: center;
  height: 61px;
  background: #ffffff;
  font-size: 14px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
  .go_time {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a6a6a6;
    border-right: 1px solid #efecec;
    .order_goTime {
      color: #ef9133;
    }
    .go_time_r {
      margin-left: 4px;
      width: 7px;
      height: 9px;
      img {
        width: 8px;
        vertical-align: super;
      }
      // background-color: #0f0;
    }
  }
  .take_time {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a6a6;
    .order_makeTime {
      color: #ef9133;
    }
    .take_time_r {
      width: 7px;
      height: 9px;
      margin-left: 4px;
      img {
        width: 8px;
        vertical-align: super;
      }
      // background-color: #0f0;
    }
  }
}
</style>
